<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@include file="/common/common.jsp" %>
    <link rel="stylesheet" href="${basePath}/plugins/ztree/zTreeStyle/zTreeStyle.css${VERSION}" type="text/css">
</head>
<body>
<div class="right-container">
    <div class="row">
        <div class="col-sm-4">
            <div class="widget-box widget-color-blue2">
                <div class="widget-header">
                    <h4 class="widget-title lighter smaller">部门选择</h4>
                </div>

                <div class="widget-body">
                    <div class="widget-main padding-8">
                        <ul id="treeDemo" class="ztree"></ul>
                        <ul class="list">
                            [ <a id="expandAllBtn" href="#" onclick="return false;">全部展开</a> ]
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-8">
            <div class="widget-box widget-color-green2">
                <div class="widget-header">
                    <h4 class="widget-title lighter smaller">人员列表</h4>
                </div>
                <div class="widget-body">
                    <div class="widget-main padding-8">
                        <div class="container-select text-left">
					        
					        <div class="search-input">
					            <span>用户姓名：</span>
					            <input id="userName" name="userName" type="text"  style="width:150px">
					        </div>
					        <button id="searchBtn" class="btn btn-primary" type="button">
					            <i class="fa fa-search"></i>&nbsp;查询
					        </button>
					        
					        <button id="chosenUserBtn" class="btn btn-primary" type="button">
					            <i class="fa fa-pencil"></i>&nbsp;确认
					        </button>
					        
					    </div>
                        
                        
                        
                        <div class="row">
					        <div class="col-xs-12">
					            <table id="grid-table"></table>
					            <div id="grid-pager"></div>
					        </div>
					    </div>
					    
					    <!--  
                        <div class="clear">
                        
                        </div>
                        -->
                        
                        <input type="hidden" id="parentId">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 
<div class="right">
    <ul class="info">
        <li>
            <ul class="list">
                [ <a id="expandAllBtn" href="#" onclick="return false;">全部展开</a> ]
                [ <a id="asyncAllBtn" href="#" onclick="return false;">后台自动全部加载</a> ]
                [ <a id="resetBtn" href="#" onclick="return false;">Reset zTree</a> ]
            </ul>
        </li>
    </ul>
</div>
</div>
 -->
<!-- /.main-container -->
<script src="${basePath}/plugins/ztree/jquery.ztree.core.js"></script>
<script src="${basePath}/plugins/jqGrid/jquery.jqGrid.min.js${VERSION}"></script>
<script src="${basePath}/plugins/jqGrid/grid.locale-cn.js${VERSION}"></script>
<script type="text/javascript">
var pageii = null;
var userName;
var alloterId;
var userIds = [];
var userNames = [];
var counts;

jQuery(function ($) {
  /*  CommonUtils.timeout("#error");*/
    CommonUtils.grid({
        url: "${basePath}/user/anon/findUsersByOrId",
        colNames: ['用户ID','用户姓名'],
        colModel: [
			{name: 'userId', index: 'userId', key: true, width: 20, sorttype: "int"},
            {name: 'userName',index: 'userName',width: 40}
        ],
        multiselect: true,
        multiboxonly: true,
        /*onSelectRow: function(id){
        	var rowsIds = $("#grid-table").jqGrid('getGridParam', 'selarrrow');
        	$(rowsIds).each(function () {
 	            var rowData = $("#grid-table").jqGrid('getRowData', this);
 	            userIds.push(rowData.userId);
 	            parent.userIds = userIds;
 	        });
        	alert(userIds);
        	
        	userName = $("#grid-table").jqGrid('getRowData',id).userName;
        	alloterId = $("#grid-table").jqGrid('getRowData',id).userId;
        },*/
        jsonReader: {
            root: "rows", page: "currentPage", total: "totalPages",
            records: "totalRecords", repeatitems: false, id: "id"
        }
    });
});



	$('#chosenUserBtn').click("click", function () {
	    var rowsIds = $("#grid-table").jqGrid('getGridParam', 'selarrrow');
	    if (rowsIds.length <= 0  || rowsIds == "") {
	        layer.msg("请至少选择一行数据！");
	        return;
	    }
	    layer.confirm('人员已选择！是否关闭窗口？',{ icon: 3}, function (index) {
	        $(rowsIds).each(function () {
	            var rowData = $("#grid-table").jqGrid('getRowData', this);
	            userIds.push(rowData.userId);
	            userNames.push(rowData.userName);
	           
	        });
	        //parent.userIds = userIds;
	        parent.$("#userName").val('');
	        parent.$("#alloterIds").val('');
	        parent.$("#userName").val(userNames);
	        parent.$("#alloterIds").val(userIds);
	        parent.layer.closeAll();
            return false;
	   });
	});
	
	
	 $("#searchBtn").click(function () {
		 queryUsers();
    });


    function queryUsers() {
    	
    	if($.trim($('#userName').val())==''){
    		layer.msg("请填写搜索条件！");
	        return;
    	}
    	
        var queryDataUsers = {
            "userName": $.trim($('#userName').val()),
        };

        $("#grid-table").jqGrid("setGridParam",{
        			url: "${basePath}/user/anon/findUsersByOrId",
                    postData:{
                    	"userName": $.trim($('#userName').val()),
                    	"orgId": ''
                    },
                    datatype: 'json'
                }
        ).trigger("reloadGrid", [{page: 1}]);
    };

    <!--
    
   
    
    
    var demoMsg = {
        async: "正在进行异步加载，请等一会儿再点击...",
        expandAllOver: "全部展开完毕",
        asyncAllOver: "后台异步加载完毕",
        asyncAll: "已经异步加载完毕，不再重新加载",
        expandAll: "已经异步加载完毕，使用 expandAll 方法"
    }
    var setting = {
        async: {
            enable: true,
            url: "${basePath}/org/getOrgTree",
            autoParam: ["id=parentId"],
            otherParam: {"otherParam": "zTreeAsyncTest"},
            dataFilter: filter,
            dataType: "json",
            type: "get"
        },
        callback: {
            beforeAsync: beforeAsync,
            onAsyncSuccess: onAsyncSuccess,
            onAsyncError: onAsyncError,
            onClick: onClick
        }
    };

    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        var data = childNodes.data;
        for (var i = 0, l = childNodes.length; i < l; i++) {
            data[i].name = data[i].name.replace(/\.n/g, '.');
        }
        return data;
    }

    function beforeAsync() {
        curAsyncCount++;
    }

    function onAsyncSuccess(event, treeId, treeNode, msg) {
        curAsyncCount--;
        if (curStatus == "expand") {
            expandNodes(treeNode.children);
        } else if (curStatus == "async") {
            asyncNodes(treeNode.children);
        }

        if (curAsyncCount <= 0) {
            if (curStatus != "init" && curStatus != "") {
                $("#demoMsg").text((curStatus == "expand") ? demoMsg.expandAllOver : demoMsg.asyncAllOver);
                asyncForAll = true;
            }
            curStatus = "";
        }
    }

    function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
        curAsyncCount--;

        if (curAsyncCount <= 0) {
            curStatus = "";
            if (treeNode != null) asyncForAll = true;
        }
    }

    var curStatus = "init", curAsyncCount = 0, asyncForAll = false,
            goAsync = false;
    function expandAll() {
        if (!check()) {
            return;
        }
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        if (asyncForAll) {
            $("#demoMsg").text(demoMsg.expandAll);
            zTree.expandAll(true);
        } else {
            expandNodes(zTree.getNodes());
            if (!goAsync) {
                $("#demoMsg").text(demoMsg.expandAll);
                curStatus = "";
            }
        }
    }
    function expandNodes(nodes) {
        if (!nodes) return;
        curStatus = "expand";
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        for (var i = 0, l = nodes.length; i < l; i++) {
            zTree.expandNode(nodes[i], true, false, false);
            if (nodes[i].isParent && nodes[i].zAsync) {
                expandNodes(nodes[i].children);
            } else {
                goAsync = true;
            }
        }
    }

    function asyncAll() {
        if (!check()) {
            return;
        }
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        if (asyncForAll) {
            $("#demoMsg").text(demoMsg.asyncAll);
        } else {
            asyncNodes(zTree.getNodes());
            if (!goAsync) {
                $("#demoMsg").text(demoMsg.asyncAll);
                curStatus = "";
            }
        }
    }
    function asyncNodes(nodes) {
        if (!nodes) return;
        curStatus = "async";
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        for (var i = 0, l = nodes.length; i < l; i++) {
            if (nodes[i].isParent && nodes[i].zAsync) {
                asyncNodes(nodes[i].children);
            } else {
                goAsync = true;
                zTree.reAsyncChildNodes(nodes[i], "refresh", true);
            }
        }
    }

    function reset() {
        if (!check()) {
            return;
        }
        asyncForAll = false;
        goAsync = false;
        $("#demoMsg").text("");
        $.fn.zTree.init($("#treeDemo"), setting);
    }

    function check() {
        if (curAsyncCount > 0) {
            $("#demoMsg").text(demoMsg.async);
            return false;
        }
        return true;
    }

    var orgName;
    var orgId;
    function onClick(event, treeId, treeNode, clickFlag) {
    	
        //orgName = treeNode.name;
        //orgId = treeNode.id;
        //query(treeNode.id);
        
        $("#grid-table").jqGrid('setGridParam',{
            url: "${basePath}/user/anon/findUsersByOrId",
            postData:{
            	orgId: treeNode.id,
            	"userName": ''
            }, //发送数据
            page:1
        }).trigger("reloadGrid"); //重新载入
        
        curNode = treeNode;

        orgName = treeNode.name;
        orgId = treeNode.id;

    }
    
    function query(parentId){
    	//alert(treeNode.id);
        $("#parentId").val(parentId);
        $("#grid-table").jqGrid('setGridParam',{
            url: "${basePath}/org/getOrgTreeForPage",
            postData:{
                parentId: parentId
            }, //发送数据
            page:1
        }).trigger("reloadGrid"); //重新载入
    }

    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting);
        $("#expandAllBtn").bind("click", expandAll);
        $("#asyncAllBtn").bind("click", asyncAll);
        $("#resetBtn").bind("click", reset);
    });
    //-->
</script>
</body>
</html>